<template>
	<!-- 我的头部 -->
	<view class="myHead">
		<view class="headUp">
			<img class="upImg" :src="isLogin.photo" alt="">
			<view class="upText" v-if="!isLogin.account">
				<h6>hi~</h6>
				<h6>你还没有登录呢</h6>
			</view>
			<view class="upText" v-else>
				<h2>{{isLogin.account}}</h2>
			</view>
			<span class="iconfont icon-shezhi upImg1"></span>
		</view>
		<view class="headDown" v-if="!isLogin.account">
			<button class="headBtn1" @click="openListOrder">注册</button>
			<button class="headBtn1" @click="goLogin">登录</button>
		</view>
		<view class="headDown" v-else>
			<button class="headBtn1" @click="signOut">退出</button>
		</view>
	</view>
	<view class="header-nav">
		<view class="h2 active">个人信息</view>
		<view class="h2" @click="openListOrder()">我的订单</view>
		<view class="h2">用户投诉</view>
		<view class="h2">关于APP</view>
	</view>
</template>

<script setup>
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		reactive,
		ref
	} from "vue"
	const isLogin = reactive({});
	// console.log(isLogin, "查看拿到的信息")
	onShow(() => {
		Object.assign(isLogin,uni.getStorageSync("sag"))
		uni.startPullDownRefresh({})
		uni.stopPullDownRefresh()
	})
	//跳登录
	function goLogin() {
		uni.navigateTo({
			url: '/pages/login/login'
		});
	}
	//跳注册
	function openListOrder() {
		uni.navigateTo({
			url: '/pages/register/register'
		});
	}
	//退出登录
	function signOut() {
		isLogin.phone = ""
		isLogin.account = ""
		isLogin.photo  = ""
		uni.removeStorage({
			key: 'sag', //本地缓存中的指定的 key
			success(res) { //接口调用的回调函数
				console.log('移除成功');
			}
		})
		uni.removeStorage({
			key: 'token', //本地缓存中的指定的 key
			success(res) { //接口调用的回调函数
				console.log('移除成功');
			}
		})
		uni.showToast({
			title: '退出成功',
			duration: 2000//单位毫秒
		});
	}
</script>

<style scoped>
	* {
		padding: 0;
		margin: 0;
	}

	body,
	html {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}

	body {
		padding-bottom: 176rpx;
		/* 176/75 */
	}

	.myHead {
		margin-top: 40rpx;
		/* 60/75 */
		width: 100%;
		height: 300rpx;
		background-color: cornsilk;
		border-radius: 30rpx;
		padding: 10rpx 0;
	}

	.myHead>.headUp {
		display: flex;
		width: 100%;
		height: 150rpx;
		/* 150/75 */
	}

	.myHead>.headUp>.upImg {
		width: 150rpx;
		height: 150rpx;
		margin-left: 40rpx;
		/* 40/75 */
	}

	.myHead>.headUp>.upText {
		font-size: 28rpx;
		/* 28/75 */
		color: #3D4C46;
		letter-spacing: 2rpx;
		/* 2/75 */
		margin-left: 32rpx;
		/* 32/75 */
		padding-top: 42rpx;
		/* 42/75 */
	}

	.myHead>.headUp>.icon-shezhi {
		font-size: 200%;
		margin-left: 228rpx;
		/* 228/75 */
	}

	.myHead>.headDown>.headBtn1 {
		width: 182rpx;
		/* 182/75 */
		height: 76rpx;
		/* 76/75 */
		border-radius: 10rpx;
		/* 10/75 */
		border: 2px solid #3D4C46;
		background-color: #F1ECE7;
		font-size: 30rpx;
		/* 30/75 */
		color: #3D4C46;
		letter-spacing: 2.14rpx;
		/* 2.14/75 */
		margin-right: 60rpx;
		/* 60/75 */
		margin-top: 52rpx;
		/* 52/75 */
	}

	.myHead>.headDown>.headBtn1:active {
		background-color: #354E44;
		color: #FFFFFF;
	}

	.myHead>.headDown {
		display: flex;
		justify-content: center;
	}

	.header-nav {
		background-color: #FFFFFF;
		margin-top: 30rpx;
		width: 100%;
		/* height: 100%-300rpx; */
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.header-nav>.h2 {
		width: 700rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		margin-bottom: 30rpx;
		height: 70rpx;
		border-bottom: 2px solid whitesmoke;
		line-height: 70rpx;
	}

	.header-nav>.h2:active {
		color: darkgray;
	}
</style>
